<!-- 地址管理 -->
<template>
  <div>
    <!-- 查找框 -->
    <div>
      <el-space wrap>
        <el-input v-model="input" placeholder="请输入用户ID" clearable @clear="handlersearch" style="width:300px;" />
        <el-button type="primary" :icon="Search" @click="handlersearch">查找</el-button>
      </el-space>
    </div>

    <!-- 表格数据 -->
    <div style="margin-top: 20px;">
      <el-table :data="settabledata.list" style="width:100%;" border>
        <el-table-column prop="id" label="地址ID" align="center" />
        <el-table-column prop="userId" label="用户ID" align="center" />
        <el-table-column prop="consignee" label="签收人" align="center" />
        <el-table-column prop="phone" label="手机号" align="center" />
        <el-table-column prop="province" label="省份" align="center" />
        <el-table-column prop="city" label="城市" align="center" />
        <el-table-column prop="county" label="区/县" align="center" />
        <el-table-column prop="address" label="详情地址" align="center" />
      </el-table>
    </div>

    <!-- 分页数据 -->
    <paging-list :listdata="listdata" @Change="giterList"></paging-list>
  </div>
</template>


<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { post } from "@/utils/request";
import { Pagination } from "#/index";


const input = ref(undefined)
let settabledata = reactive({ //表格数据
  list: [] as string[]
})
let listdata = reactive(new Pagination()) //分页数据
// 分页
const giterList = (e: { page: number; limit: number; total: number; flog: { valueOf: () => boolean; }; targetAdminId?: undefined; }) => { //获取下一页的数据并赋值
  listdata = e
  handlerlistData()
}

/**
 * 初始化数据
 */
function handlerlistData() {
  let data = {
    _gp: 'admin.address',
    _mt: 'list',
    userId: listdata.userId,
    page: listdata.page,
    limit: listdata.limit
  }
  post(data).then(res => {
    console.log(res);
    let { data, errno, errmsg } = res
    settabledata.list.length = 0
    settabledata.list.push(...data.items)
    listdata.total = data.total
  })
}
handlerlistData()

/**
 * 搜索
 */
function handlersearch() {
  listdata.userId = input.value
  handlerlistData()
}
</script>

<style lang="less" scoped>

</style>
